﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统管理</title>
    <link rel="stylesheet" type="text/css" href="/admin/styles/iview.css">
    <style>
        html, body, #app, .ivu-layout {
            height: 100%;
        }

        .layout {
            background: #f5f7f9;
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        .layout-header-bar {
            background: #fff;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
        }

        .menu-item span {
            display: inline-block;
            overflow: hidden;
            width: 69px;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            transition: width .2s ease .2s;
        }

        .menu-item i {
            transform: translateX(0px);
            transition: font-size .2s ease, transform .2s ease;
            vertical-align: middle;
            font-size: 16px;
        }

        .collapsed-menu span {
            width: 0px;
            transition: width .2s ease;
        }

        .collapsed-menu i {
            transform: translateX(5px);
            transition: font-size .2s ease .2s, transform .2s ease .2s;
            vertical-align: middle;
            font-size: 22px;
        }

        .logo-con {
            height: 64px;
            padding: 10px;
        }

            .logo-con img {
                display: block;
                height: 44px;
                margin: 0 auto;
                width: auto;
            }

        .ivu-layout-sider {
            background: #001529;
        }

        .ivu-menu-dark {
            background: #001529;
        }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
                background: #001529;
                color: #fff
            }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
                background: #000c17
            }

                .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
                    background: #001529
                }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
                background: #000c17
            }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
                background: #001529;
                color: #fff
            }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
                color: #2d8cf0;
            }

            .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
                background: #2d8cf0 !important;
                border-right: none;
                color: #fff;
            }

        .ivu-breadcrumb {
            display: inline-block;
        }

        .custom-content-con {
            float: right;
            height: auto;
            line-height: 64px;
            padding-right: 20px;
        }
    </style>

</head>
<body>
    <div id="app">
        <div class="layout">
            <Layout>
                <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed">
                    <div class="logo-con">
                        <img src="" />
                    </div>
                    <i-menu active-name="0" theme="dark" width="auto" :class="menuitemClasses" @@on-select="onMenuSelect">
                        <menu-item name="0">
                            <Icon type="ios-home"></Icon>
                            <span>系统首页</span>
                        </menu-item>
                        <menu-item name="1">
                            <Icon type="ios-create"></Icon>
                            <span>发布内容</span>
                        </menu-item>
                        <menu-item name="2">
                            <Icon type="md-pricetag"></Icon>
                            <span>标签管理</span>
                        </menu-item>
                        <Submenu name="m1">
                            <template slot="title">
                                <Icon type="md-folder"></Icon>
                                内容管理
                            </template>
                            <menu-item name="3">
                                <Icon type="md-document"></Icon>
                                <span>博客管理</span>
                            </menu-item>
                            <menu-item name="4">
                                <Icon type="md-pricetag"></Icon>
                                <span>标签管理</span>
                            </menu-item>
                        </Submenu>
                        <Submenu name="m2">
                            <template slot="title">
                                <Icon type="ios-settings"></Icon>
                                系统设置
                            </template>
                            <menu-item name="5">
                                <Icon type="md-person"></Icon>
                                <span>用户管理</span>
                            </menu-item>
                        </Submenu>
                    </i-menu>
                    <div slot="trigger"></div>
                </Sider>
                <Layout>
                    <i-header class="layout-header-bar">
                        <span>位置：</span>
                        <breadcrumb>
                            <breadcrumb-item v-for="item in breadcrumbs">{{item}}</breadcrumb-item>
                        </breadcrumb>
                        <div class="custom-content-con">
                            <Dropdown @@on-click="onMenuClick">
                                <Avatar style="background-color: #17233d" icon="ios-person"></Avatar>
                                <Icon type="md-arrow-dropdown" style="font-size: 18px;"></Icon>
                                <Dropdown-Menu slot="list">
                                    <Dropdown-Item name="update">修改密码</Dropdown-Item>
                                    <Dropdown-Item name="exit" divided>退出系统</Dropdown-Item>
                                </Dropdown-Menu>
                            </Dropdown>
                        </div>
                    </i-header>
                    <i-content :style="{margin: '20px', background: '#fff', minHeight: '220px',height: '100%',padding:'10px'}">
                        <iframe id="mainFrame" :src="href" width="100%" height="100%" frameborder="0"></iframe>
                    </i-content>
                </Layout>
            </Layout>
        </div>
    </div>
    <script type="text/javascript" src="/admin/vue.min.js"></script>
    <script type="text/javascript" src="/admin/iview.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isCollapsed: false,
                href: '/Admin/Blog/Create',
                breadcrumbs: ['首页'],
                menus: [
                    { url: 'Blog/Create', breadcrumb: ['首页'] },
                    { url: 'Blog/Create', breadcrumb: ['首页', '博客管理', '编辑博客'] },
                    { url: 'Blog/Tags', breadcrumb: ['首页', '标签管理'] },
                    { url: 'Blog/Index', breadcrumb: ['首页', '内容管理', '博客管理'] },
                    { url: 'Blog/Tags', breadcrumb: ['首页', '内容管理', '标签管理'] },
                    { url: 'User/Index', breadcrumb: ['首页', '系统设置', '用户管理'] }
                ]
            },
            computed: {
                menuitemClasses: function () {
                    return [
                        'menu-item',
                        this.isCollapsed ? 'collapsed-menu' : ''
                    ];
                }
            },
            methods: {
                onMenuSelect: function (index) {
                    this.$Loading.start();
                    var menu = this.menus[index];
                    this.href = '/Admin/' + menu.url;
                    this.breadcrumbs = menu.breadcrumb;
                },
                onMenuClick: function (name) {
                    this.$Loading.start();
                    if (name === 'update') {
                        this.href = '/Admin/User/Index';
                    } else {
                        top.location.href = '/Account/LogOff';
                    }
                }
            }
        });
        window.addEventListener('message', function (e) {
            app.$Loading.finish();
        }, false);
    </script>
</body>
</html>